import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { withRouter } from 'react-router-dom';

import Container from '@icedesign/container';
import { Grid, Button } from '@alifd/next';
import Img from '@icedesign/img';

const { Row, Col } = Grid;

//格式化日期
Date.prototype.Format = function (fmt) {
  var o = {
    "y+": this.getFullYear(),
    "M+": this.getMonth() + 1,                 //月份
    "d+": this.getDate(),                    //日
    "h+": this.getHours(),                   //小时
    "m+": this.getMinutes(),                 //分
    "s+": this.getSeconds(),                 //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    "S+": this.getMilliseconds()             //毫秒
  };
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)){
      if(k == "y+"){
        fmt = fmt.replace(RegExp.$1, ("" + o[k]).substr(4 - RegExp.$1.length));
      }
      else if(k=="S+"){
        var lens = RegExp.$1.length;
        lens = lens==1?3:lens;
        fmt = fmt.replace(RegExp.$1, ("00" + o[k]).substr(("" + o[k]).length - 1,lens));
      }
      else{
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
  }
  return fmt;
}

class UserLanding extends PureComponent {
  state = {
    userLevel: ['L0', 'L1', 'L2', 'L3', 'L4', 'L5', 'L6'],
    userCurrentLevel: 'L5',
  };

  handlePost = () => {
    this.props.history.push('/center/post/new');
  };

  render() {
    const { userData } = this.props;
    let date = new Date(userData.createTime);
    return (
      <Row wrap gutter="20">
        <Col l="18">
          <Container style={styles.container}>
            <div style={styles.avatarWrapper}>
              <Img 
                width={64}
                height={64}
                src={require('./images/avatar.jpg')}
                style={styleMedia.avatar}
              />
              <img 
                alt="用户等级"
                src={require('./images/level.png')}
                style={styles.level}
              />
            </div>
            <div style={styles.userInfo}>
              <div style={styles.userDetail}>
                <span style={styles.userName}>{userData.username}</span>
                <div style={styles.userLabel}>
                {userData.realName ? "已实名认证" : "未实名认证"}
                </div>
              </div>
              <div style={styles.userOther}>邮箱：2329082643@qq.com</div>
              <div style={styles.userOther}>加入时间：{date.Format("yyyy年MM月dd日 hh:mm:ss")}</div>
            </div>
            <div style={styles.userLevelWrapper}> 
              <div style={styles.userLevelLine} />
              {
                this.state.userLevel.map((level, index) => {
                  const isCurrent = this.state.userCurrentLevel === level;
                  return (
                    <div
                      style={{
                        ...styles.userlevelItem,
                        marginLeft: index === 0 ? 0 : 14,
                        backgroundColor: isCurrent ? 'rgb(204, 153, 51)' : '#fff',
                        color: isCurrent ? '#fff' : '#666',
                      }}
                      key={index}
                    >
                      {level}
                      {isCurrent && (
                        <div style={styles.userLevelLight}>当前等级</div>
                      )}
                    </div>
                  );
                })
              }
            </div>
          </Container>
        </Col>
        <Col l="6">
          <Container style={{ height: '160px' }}>
            <h3 style={{ margin: '0', color: '#333' }}>待办事项</h3>
            <div style={{ paddingTop: '10px', textAlign: 'center' }}>
              <Button
                onClick={this.handlePost}
                type="primary"
                style={{ width: '100%', lineHeight: '40px', height: '40px', borderRadius: '4px', backgroundColor: 'rgb(204, 153, 51)' }}
              >
                上传新作品
              </Button>
            </div>
          </Container>
        </Col>
      </Row>
    );
  }

  // 从后台获取数据 get http://localhost:9080/users/current
  componentDidMount() {
    this.props.getUserData();
  }
}

const styles = {
  container: { 
    display: 'flex',
    alignItems: 'center',
    height: '160px',
  },
  avatarWrapper: {
    width: 64,
    height: 65,
    position: 'relative',
    // filter: 'drop-shadow(0 0 2px rgba(0,0,0,0.3))',
  },
  avatar: {
    borderRadius: 5,
    width: '100%',
    height: '100%',
  },
  level: {
    position: 'absolute',
    bottom: -2,
    right: -2,
    width: 22,
    height: 22,
  },
  userInfo: {
    marginLeft: 20,
    color: '#999',
    flex: 'auto',
  },
  userDetail: {
    display: 'flex',
    height: 24,
    alignItems: 'center',
  },
  userName: {
    fontSize: 18,
    color: '#666',
    marginRight: 5,
    display: 'inline-block',
    maxWidth: 200,
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
  },
  userLabel: {
    height: 16,
    lineHeight: '16px',
    borderRadius: 2,
    padding: '0 5px',
    marginLeft: 10,
    fontSize: 12,
    textAlign: 'center',
    color: 'rgb(204, 153, 51)',
    backgroundColor: 'rgb(255, 242, 244)',
    whiteSpace: 'nowrap',
  },
  userOther: {
    fontSize: 12,
    lineHeight: '20px',
  },
  userLevelWrapper: {
    display: 'flex',
    position: 'relative',
  },
  userlevelItem: {
    backgroundColor: '#fff',
    border: '1px solid rgb(204, 153, 51)',
    borderRadius: '12px',
    padding: '2px 6px',
    marginLeft: 14,
    position: 'relative',
  },
  userLevelLight: {
    position: 'absolute',
    color: 'rgb(204, 153, 51)',
    top: 30,
    width: 48,
    fontSize: 12,
    left: -12,
  },
  userLevelLine: {
    height: 2,
    backgroundColor: 'rgb(204, 153, 51)',
    position: 'absolute',
    left: 0,
    right: 0,
    top: 11,
    zIndex: 0,
  },
};

const mapState = (state) => ({
  userData: state.getIn(['center', 'userData']).toJS()
});

const mapDispatch = (dispatch) => ({
  getUserData() {
    dispatch(actionCreators.getUserData());
  }
});

export default connect(mapState, mapDispatch)(withRouter(UserLanding));